<template>
  <div>
    <input
      type="text"
      h-25px
      shadow
      shadow-inset
      shadow-green-5
      v-model="inputRef"
    />
    <button py-1 ml-2 px-3 inline-block bg-blue-100 rounded-lg @click="addTodo">
      添加
    </button>

    <!-- 列表组件 -->
    <TodoList :totos="todos"></TodoList>
  </div>
</template>

<script lang="ts" setup>
import TodoList from "./todo-list";
const inputRef = ref<string>("");
const todos = ref<string[]>([]);

const addTodo = () => {
  if (!unref(inputRef)) return;
  todos.value.push(inputRef.value);
  inputRef.value = "";
};
</script>
